import React from 'react'
import { BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react';
import { LeftPage, LeftTopBox, LeftBottomBox } from './style';
import { ModuleTitle } from '../../style/globalStyledSet';
import TrafficSituation from './charts/TrafficSituation';
import UserSituation from './charts/UserSituation';
import { data } from './charts/options';

export default function useLeftPage() {
 return (
  <LeftPage>
   {/* 顶部图表 */}
   <LeftTopBox>
    <BorderBox12 className='left-top-borderBox12'>
     <div className='left-top'>
      <ModuleTitle>
       <i className='iconfont'>&#xe78f;</i>
       <span>今日流量态势</span>
      </ModuleTitle>
      <div className='title-dis'>
       <span>
        平均接纳次数(小时):
        <span className='title-dis-keyword'>{data.accessFrequency}次</span>
       </span>
       <span>
        流量峰值:
        <span className='title-dis-keyword'>{data.peakFlow}M</span>
       </span>
      </div>
      {/* 图表 */}
      <TrafficSituation trafficSitua={data.trafficSitua}></TrafficSituation>
     </div>
    </BorderBox12>
   </LeftTopBox>

   {/* 底部图表 */}
   <LeftBottomBox>
    <BorderBox13 className='left-bottom-borderBox13'>
     <div className='left-bottom'>
      <ModuleTitle>
       <i className='iconfont'>&#xe88e;</i>
       <span>用户数据状态</span>
      </ModuleTitle>
      {/* 图表 */}
      <UserSituation userSitua={data.userSitua}></UserSituation>
     </div>
    </BorderBox13>
   </LeftBottomBox>
  </LeftPage>
 )
}
